/*
# Copyright (c) 2020-2030 iSoftStone Information Technology (Group) Co.,Ltd.
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
*/

.container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.content {
    width: 346px;
    height: 346px;
    background-color: #87939A;
    position: relative;
    box-shadow: 0 0 0 10px #940c11;
}

.buttonDiv {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 346px;
    margin-left: 50px;
}

.xianshouBtn {
    width: 100px;
    height: 40px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    background-color: #d98013;
}

.cln {
    width: 346px;
    height: 346px;
    flex-wrap: wrap;
}

.row {
    width: 23px;
    height: 23px;/*  border: 1px solid red;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.black {
    width: 13px;
    height: 13px;
    margin: 5px;
    background-color: #000;
    border-radius: 20px;/*    box-shadow: 1px 1px 1px 1px #000;*/
}

.white {
    width: 13px;
    height: 13px;
    margin: 5px;
    background-color: #fff;/*    box-shadow: 1px 1px 1px 1px #fff;*/
    border-radius: 20px;
}

.board {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 323px;
    height: 323px;
    z-index: -1;
    flex-wrap: wrap;/*    box-shadow: 0 0 0 2px #000;*/
}

.board_row {
    width: 23px;
    height: 23px;
    border: 1px solid #000;
}

.msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, .8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 22px 0;
    border-radius: 20px;
    text-align: center;
    width: 40%;
    color: #000;
    font-size: 20px;
}

.msg .btn {
    width: 100px;
    height: 40px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #50db12;
    border-radius: 16px;
    margin-top: 10px;
}